<template>
  <div>
    <ul class="notice-ul" v-if="noticeList.length">
      <li class="notice-li" v-for="(item, index) in noticeList" :key="index">
        <div class="notice-li-item">
          <span>督办对象：</span>
          {{ item.objName }}
        </div>
        <div class="notice-li-item content">
          <span>督办原因：</span>
          {{ item.superHandleContent }}
        </div>
        <div class="time-type">
          <div>{{ item.superHandleTime }}</div>
          <!-- <van-tag color="#ffe1e1" text-color="#ee0a24">{{ item.superHandleType === '1' ? '反馈' : '评价' }}</van-tag> -->
        </div>
        <div class="tag">{{ item.superHandleType === '1' ? '反馈' : '评价' }}</div>
      </li>
    </ul>
    <van-empty description="暂无数据" v-else />
  </div>
</template>
<script>
import { listSuperHandle } from '@api/api-task.js'
export default {
  name: 'ReminderNotice',
  props: {
    // 详情
    detailsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      noticeList: [], // 督办通知
    }
  },
  watch: {
    detailsData: {
      handler(obj) {
        if (obj.id) {
          // this.getApproveList()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initdata() {
      listSuperHandle({
        superHandleType: '',
        taskId: this.detailsData.id,
      }).then(res => {
        const { data = [] } = res || {}
        this.noticeList = data
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.notice-ul {
  .notice-li {
    margin: 0 px2rem(20) px2rem(20);
    background: #fff;
    font-size: $fontSize30;
    padding: px2rem(20);
    position: relative;
    overflow: hidden;
    .notice-li-item {
      // display: flex;
      span {
        color: #666;
        // font-weight: 600;
      }
      &.content {
        padding: px2rem(20) 0;
        margin: px2rem(20) 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
      }
    }
    .van-tag {
      padding: 0 4px;
    }
    .time-type {
      display: flex;
      justify-content: space-between;
      color: #999;
    }
    .tag {
      text-align: center; // 文本居中
      position: absolute; // 绝对定位
      background-color: #e87c6e; // 背景色
      color: #fff;
      // 以下属性会影响斜边标签的显示
      width: 150px;
      height: px2rem(70);
      line-height: px2rem(90);
      top: -6px;
      right: -60px;
      transform: rotate(45deg);
      font-size: $fontSize28;
    }
  }
}
</style>
